<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Uploader Control (experimental): Advanced Uploader Example</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>

<!--there is no custom header content for this example-->


</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em>
			<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>	
			<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
			</em>
		</p>
		<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label> 
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="fr" type="hidden" value="ush-myweb">
		<input id="ygsp" name="va" size="22"> 
		<input type="submit" value="Search" class="ygbt"></form>
	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" width="378" height="28"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Uploader Control (experimental): Advanced Uploader Example</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">
	
	<div class="promo">
	<h1>Uploader Control (experimental): Advanced Uploader Example</h1>
	
	<div class="exampleIntro">
	<p>In this example, we will pair the <a href="../../uploader/">YUI Uploader Control</a> with the <a href="../../datatable/">DataTable Control</a> to give the user visual feedback on the progress of their file upload. When the user selects multiple files for upload, a DataTable will be populated with the list of files and their sizes. When the user starts the upload process, they'll see progress bars next to each of the files as they upload.</p>

<p><strong>Note:</strong> The YUI Uploader Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p>
<p><strong>Note:</strong> The YUI Uploader Control requires the uploader.swf Flash file that is distributed as part of the YUI package, in the uploader/assets folder. Copy the uploader.swf to your server and set the YAHOO.Uploader.SWFURL variable to its full path.</p>
			
	</div>	
					
	<div class="example-container module ">
			<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<p><strong>Note:</strong> This example requires a backend component to receive uploaded files. Download the source for this example below to use on your own server.</p>

<p><a href="assets/uploader-advanced.zip"><strong>Download example source.</strong></a></p>

<p>When you have the example running on your own server, it should look like the screenshot below:</p>

<p><img src="assets/uploader-advanced.jpg" alt="Advanced Uploader Example Screenshot"/></p>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Using Uploader with the DataTable Control to Handle Multi-file Uploads with Progress Feedback</h2>
<p>Just as we did in the <a href="uploader-simple.html">Simple Example</a>, we start with including all the necessary files. We will need the base YUI files, as well as files specific to the Logger, Uploader, and DataTable.</p>

<textarea name="code" class="html" cols="60" rows="5"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Uploader With DataTable Example</title>
<!-- Required YUI files -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js"></script>

<!-- Required JSON files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/json/json-beta.js"></script>

<!-- Required Datasource and Datatable files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js"></script>

<!-- Main Uploader script -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/uploader/uploader-experimental.js"></script>

<!-- Logger CSS and JS --> 
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/logger/assets/skins/sam/logger.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/logger/logger-min.js"></script>
</head>

<body class="yui-skin-sam">
</textarea>

<p>Next, just as we did in the <a href="uploader-simple.html">Simple Example</a>, we add a container <code>div</code> where the Uploader Control will be placed. If you don't want it to be visible,  feel free to set the size of the container element to <code>height:0; width:0</code> (with <code>overflow:hidden</code>). We also add the &quot;Browse&quot; and &quot;Upload&quot; buttons:</p>

<textarea name="code" class="html" cols="60" rows="5"><h1>Uploader With DataTable Example</h1>

<div id="toBeReplaced" style="width:400px;height:210px">
Unable to load Flash content. You can download the latest version of Flash Player from the 
<a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.
</div>
<input id="browseBtn" name="browse" value="Browse for Images" onclick="browse()" type="button" />
<input id="uploadBtn" name="upload" value="Upload Selected" onclick="upload()" type="button" /></textarea>

<p>We also need to put in one additional placeholder <code>div</code> into which we'll render the DataTable:</p>

<textarea name="code" class="html" cols="60" rows="2"><div id="single" style="margin-top:2em;"></div></textarea>

<p> Next, we initialize the Logger and the Uploader, and place them on the page. We'll also initialize an <code>uploadCounter</code> that we will use to upload the files one at a time, a <code>fileIdHash</code> to keep the record between rows of the DataTable and the file ids, and a <code>dataArr</code> where we'll hold the necessary file information (we'll also use it to instantiate the DataTable). </p>

<textarea name="code" class="JScript" cols="60" rows="5">this.myLogReader = new YAHOO.widget.LogReader();

YAHOO.widget.Uploader.SWFURL = "http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf";

var uploader = new YAHOO.widget.Uploader( "toBeReplaced" );
uploader.addListener('fileSelect',onFileSelect);
uploader.addListener('uploadComplete',onUploadComplete);
uploader.addListener('uploadProgress',onUploadProgress);
uploader.addListener('uploadStart',onUploadStart);
var uploadCounter = 0;
var fileIdHash;
var dataArr;</textarea>

<p>In the <code>browse()</code> function, we clear the file list, and call the <code>uploader.browse</code> function, passing <code>true</code> as the first argument (which means the user will be able to select multiple files by holding the Shift button). We also pass the file extension filter array, allowing for three types of image files:</p>

<textarea name="code" class="JScript" cols="60" rows="5">function browse() {
  uploader.clearFileList();
  uploader.browse(true, [{description:"Images", extensions:"*.jpg;*.png;*.gif"}]);
}</textarea>

<p>Once we have received the list of files from the <code>onFileSelect</code> function (defined below), we will call the <code>createDataTable</code> function that will populate our variables, create a new DataSource based on the file list, and create the DataTable to display it:</p>

<textarea name="code" class="JScript" cols="60" rows="5">function createDataTable(entries) {
  rowCounter = 0;
  fileIdHash = [];
  dataArr = [];
  for(var i in entries) {
     var entry = entries[i];
     dataObj = {};

     for (var j in entry) {
        dataObj[j] = entry[j];
     }
     dataArr.push(dataObj);
     fileIdHash[dataObj["id"]] = rowCounter;
     rowCounter++;
  }
  
  this.allData = {data: dataArr};

    var myColumnDefs = [
        {key:"name", label: "File Name", sortable:true},
     {key:"size", label: "Size", sortable:true},
     {key:"progress", label: "Upload progress", sortable:false}
    ];
  this.myDataSource = new YAHOO.util.DataSource(this.allData);
  this.myDataSource.dataType = YAHOO.util.DataSource.TYPE_JSARRAY;
  this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
  this.myDataSource.responseSchema = {
        resultsList: ["data"],
        fields: ["id","name","created","modified","type", "size", "progress"]
  };
  
  this.singleSelectDataTable = new YAHOO.widget.DataTable("single",
           myColumnDefs, this.myDataSource, {
               caption:"Files To Upload",
               selectionMode:"single"
           });
}</textarea>

<p> In the <code>upload</code> function, we initiate the upload of the file that&#39;s indicated by the <code>uploadCounter</code>. The <code>uploadCounter</code> is incremented every time a preceding upload is complete (see <code>onUploadComplete</code> below):</p>

<textarea name="code" class="JScript" cols="60" rows="5">function upload() {
  YAHOO.log(dataArr);
  var idToUpload = dataArr[uploadCounter]["id"];
  uploader.upload(idToUpload, 'YOUR UPLOAD URL HERE');
  document.getElementById('uploadBtn').disabled = true;
}</textarea>

<p>When we receive the <code>uploadProgress</code> event, we need to update the corresponding row of the DataTable. We use a simple HTML horizontal rule as a progress bar and update its width based on the progress of the upload:</p>

<textarea name="code" class="JScript" cols="60" rows="5">function onUploadProgress(event) {
  rowNum = fileIdHash[event["id"]];
  prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"]));
  progbar = "<hr style=\"color: #f00; background-color: #f00; text-align:left; margin: 0 auto 0 0; height: 5px; width: " + prog + "px\"/>";
  singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: progbar});
}</textarea>

<p>When files are selected, we call <code>createDataTable</code> (described above):</p>

<textarea name="code" class="JScript" cols="60" rows="5">function onFileSelect(event) {
  fileList = event.fileList;
  YAHOO.log(event);
  createDataTable(fileList);
}</textarea>

<p>After the start of each file upload, it may be awhile before the first <code>uploadProgress</code> event comes in. Thus, we want the user know that the upload has started. On the <code>uploadStart</code> event, we update the respective row of the DataTable to reflect that the upload is in progress:</p>

<textarea name="code" class="JScript" cols="60" rows="5">function onUploadStart(event) {
  YAHOO.log(event);
  rowNum = fileIdHash[event["id"]];
  singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: "Starting..."});      
}</textarea>

<p>Finally, when the upload is complete, we either initiate the next upload, or, if the <code>uploadCounter</code> has equalized with the number of files, we send an appropriate message to the Logger and halt:</p>

<textarea name="code" class="JScript" cols="60" rows="5">function onUploadComplete(event) {
  YAHOO.log(event);
  rowNum = fileIdHash[event["id"]];
  progbar = "<hr style=\"color: #f00; background-color: #f00; text-align:left; margin: 0 auto 0 0; height: 5px; width: 100px\"/>";
  singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: progbar});
  
  if (uploadCounter < dataArr.length - 1) {
     uploadCounter++;
     upload();
  }
  else {
     YAHOO.log("All files uploaded!");
  }
}</textarea>
				</div>
				<div class="yui-u">
					
				
					<div id="examples">
						<h3 class='firstContent'>Uploader Control (experimental) Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../uploader/uploader-simple.html'>Simple Uploader Example</a></li><li class='selected'><a href='../uploader/uploader-advanced.html'>Advanced Uploader Example</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Uploader Control (experimental) Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/uploader/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_uploader.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/uploader.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper (beta)</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager (beta)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler (beta)</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer (beta)</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize (beta)</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="selected "><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
